<!DOCTYPE html>
<html>
<head>
    <title>购物车</title>
    <meta charset="utf-8" />
    <style type="text/css">
        *,body {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 1000px;
            height: 165px;
            margin: 0 auto;
            background-color: #0f0e0e;
        }
        #small {
      color: rgb(239, 144, 198);
      line-height: 35px;
      font-size: xx-large;
      font-weight: 700;
      width: 100%;
      padding-left: 40%;
      margin-top: 0%;
      border-bottom: #0b0b0b;
    }
        .menu {
            width: 100%;
            height: 60px;
            display: flex;
            flex-direction: row;
            list-style: none;
        }
        .menu li {
            flex-grow: 1;
            line-height: 60px;
            text-align: center;
            color: #bfbcbd;
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 10%;
            padding-top: 30px;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        }
        .con {
            width: 1000px;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: auto;
        }
        .left {
            width: 700px;
            height: 700px;
            box-shadow: 0px 0px 1px 1px #605d5d;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-content: space-round;
            flex-wrap: wrap;
        }

        .cont {
            width: 200px;
            height: 310px;
            border: 1px solid red;
            text-align: center;
            margin-bottom: 20px;
        }
        .cont img {
            padding-top: 10px;
            width: 160px;
            height: 180px;
            padding-bottom: 10px;
            cursor: pointer;
        }
        .cont img:hover {
            padding-left: 5px;
        }
        .mai {
            width: 92%;
            margin: 0 auto;
            height: 50px;
            border-bottom: 1px dashed #808080;
        }
        .mai1 {
            width: 92%;
            height: 50px;
            line-height: 50px;
            text-align: left;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .right {
            width: 280px;
            height: 100%;
        }
        .tishi {
            width: 1000px;
            border-bottom: 3px solid #000;
            margin-bottom: 20px;
        }
        .title {
            width: 348px;
            height: 70px;
            background: url('res/htmlLX/rexiao.png') no-repeat;
        }
        .midP {
            font-size: 14px;
            text-align: left;
            line-height: 20px;
        }
        .showM {
            color: #FF4500;
            cursor: pointer;
            font-weight: bold;
        }
        .product {
            width: 100%;
            height: 70px;
            border-bottom: 1px solid #ddd;
            line-height: 70px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
        }
        .product img {
            width: 60px;
            height: 60px;
        }
        .product input {
            width: 40px;
            height: 28px;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        var index =1;
        function add(url,producName){
            var product =document.createElement("div");
            product.id="div"+index;
            product.className="product";
            product.innerHTML="<img src='"+url+"' />";
            product.innerHTML+="<p>"+producName+"</p>";
            product.innerHTML+="<input type='button' value='删除' onclick='del("+index+")' />"

            var carList =document.getElementById("carList");
            carList.appendChild(product);
            index++;
        }
        function del (idx){
            var carList=document.getElementById("carList");
            var product =document.getElementById("div"+idx);
            carList.removeChild(product);
        }
        </script>
</head>
<body>
    <div class="main">
        <!--导航菜单-->
        <div class="top">
            <div id="small">Grace Vita 购物袋</div>
      <ul class="menu">   
        <li>100%正品保证 </li>
        <li>七天无理由放心退</li>
        <li> 限时抢购</li>
      </ul>
        </div>
        <div class="tishi">
            <h2 class="title"></h2>
        </div>
        <div class="con">
            <!--左侧产品列表-->
            <div class="left">
                <div class="cont">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/01/12/178/d4809c75-01e0-42e7-ac56-c505c87896bf.jpg" />
                    <div class="mai">
                        <p class="midP">全新迪奥烈艳蓝金唇膏 </p>
                        <p class="midP">潮流镜面渐变色 2400万自拍</p>
                    </div>
                    <div class="mai1">
                        <span>价格：399 元</span>
                        <span class="showM" onclick="add('https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/01/12/178/d4809c75-01e0-42e7-ac56-c505c87896bf.jpg','全新迪奥烈艳蓝金唇膏 ')">购买</span>
                    </div>
                </div>
                <div class="cont">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/124/a4ae2012-7004-478c-9458-384a7e93030a.jpg" />
                    <div class="mai">
                        <p class="midP">全新持妆粉底液PO-01象牙白</p>
                        <p class="midP">持久遮瑕控油 免税版</p>
                    </div>
                    <div class="mai1">
                        <span>价格：230 元</span>
                        <span class="showM" onclick="add('https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/05/17/124/a4ae2012-7004-478c-9458-384a7e93030a.jpg','全新持妆粉底液PO-01象牙白')">购买</span>
                    </div>
                </div>
                <div class="cont">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/618540/2023/1221/152/a0e04513-5c18-4ee4-a714-9c8cceaca33c.jpg" />
                    <div class="mai">
                        <p class="midP">高光修容一体盘</p>
                        <p class="midP">自然持久裸妆发际线粉提亮</p>
                    </div>
                    <div class="mai1">
                        <span>价格：99 元</span>
                        <span class="showM" onclick="add('https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/618540/2023/1221/152/a0e04513-5c18-4ee4-a714-9c8cceaca33c.jpg','高光修容一体盘')">购买</span>
                    </div>
                </div>
                <div class="cont">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/618540/2024/0722/77/eca9c085-d21e-426d-a2ba-48d0259e371d.jpg" />
                    <div class="mai">
                        <p class="midP">钢管睫毛膏卷翘浓密睫毛</p>
                        <p class="midP">不结块持久防水</p>
                    </div>
                    <div class="mai1">
                        <span>价格：39 元</span>
                        <span class="showM" onclick="add('https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/618540/2024/0722/77/eca9c085-d21e-426d-a2ba-48d0259e371d.jpg','钢管睫毛膏卷翘浓密睫毛')">购买</span>
                    </div>
                </div>
                <div class="cont">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/636454/2024/0820/168/1b76da57-96eb-49a4-83e8-6257d25d71a6.jpg" />
                    <div class="mai">
                        <p class="midP">散粉定妆粉</p>
                        <p class="midP">控油持久不脱妆轻薄透气</p>
                    </div>
                    <div class="mai1">
                        <span>价格：78 元</span>
                        <span class="showM" onclick="add('https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/636454/2024/0820/168/1b76da57-96eb-49a4-83e8-6257d25d71a6.jpg','散粉定妆粉')">购买</span>
                    </div>
                </div>
                <div class="cont">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/632962/2024/0912/52/a173587a-a9ec-48cf-9b32-37cb1602615e.jpg" />
                    <div class="mai">
                        <p class="midP">光果甘草水乳套装</p>
                        <p class="midP">提亮改善暗沉保湿</p>
                    </div>
                    <div class="mai1">
                        <span>价格：309 元</span>
                        <span class="showM" onclick="add('https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/632962/2024/0912/52/a173587a-a9ec-48cf-9b32-37cb1602615e.jpg','光果甘草水乳套装')">购买</span>
                    </div>
                </div>
            </div>
            <!--右侧购物车内容-->
            <div class="right">
                <h4 style="height:40px;line-height:40px;margin-bottom:20px;">添加购物车</h4>
                <div id="carList"></div>
            </div>
        </div>
    </div>
</body>
</html>